<template>
  <div class="ani03">
      <h2>vue第三方动画</h2>
      <button @click="show=!show">toggle</button><br><hr>
      <!--  如果需要通过vue动画来配合animation.css第三方动画执行
            不需要再给transition组件来设置name，也不需要书写6个class，直接给transition组件设置enter-active-class和leave-active-class即可，
            值就像之前一样，直接设置所需要的animate.css的class即可
      -->
      <transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__fadeOutRight">
          <img src="https://t7.baidu.com/it/u=2340400811,4174965252&fm=193&f=GIF" v-if="show" width="200">
      </transition>
  </div>
</template>

<script>
export default {
    name:"Animation03",
    data(){
        return {
            show:true
        }
    }
}
</script>

<style scoped>
@import '~animate.css';
.ani03 {
    width: 100%;
    height: 70%;
    background-color: blueviolet;
}
</style>